<template>
  <div class="action-list">
    <div class="list-header">
      <span>触发动作列表</span>
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="$emit('add-action')"
        >添加触发动作</el-button
      >
    </div>
    <el-row :gutter="20">
      <el-col
        :span="8"
        v-for="(item, index) in actionList"
        :key="index"
        class="mb20"
      >
        <el-card shadow="hover" class="action-card">
          <div class="action-card-content">
            <div class="action-info">
              <p>
                <span class="label">动作类型：</span>
                <span>{{ getActionTypeLabel(item.type) }}</span>
              </p>
              <p><span class="label">产品Key：</span>{{ item.productId }}</p>
              <p><span class="label">设备ID：</span>{{ item.deviceId }}</p>
              <p>
                <span class="label">服务/方法/告警：</span
                >{{ item.serviceMethodName }}
              </p>
              <p>
                <span class="label">参数：</span
                >{{ item.serviceParams || "无" }}
              </p>
            </div>
            <div class="action-actions">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="$emit('edit-action', item)"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="$emit('delete-action', item)"
                >删除</el-button
              >
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.action-list {
  margin-top: 20px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.action-card {
  height: 100%;
}

.action-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.action-info {
  flex: 1;
}

.action-info p {
  margin: 8px 0;
  line-height: 1.5;
}

.action-info .label {
  font-weight: bold;
  color: #606266;
}

.action-actions {
  margin-top: 15px;
  text-align: right;
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
}
</style>

<script>
export default {
  props: {
    actionList: {
      type: Array,
      required: true,
    },
  },
  methods: {
    getActionTypeLabel(type) {
      const actionTypes = {
        deviceOutput: "设备输出",
        reportError: "上报告警",
        reportNotice: "上报通知",
      };
      return actionTypes[type] || type;
    },
  },
};
</script>
